// 我的账户-账户信息
<template>
  <div class="account-msg">
     <!-- 账户资产表格 -->
    <b-row>
      <b-col style="height:100px">
        <div class="user-amounts" >
          <!-- <! <! 賬戶資産折合  @click="showQr()" -->
          <span >{{$t('u_zhzczh')}}</span>

        </div>
      </b-col>
    </b-row>

    <b-table responsive="md" hover :fields="fields" :items="items" >
      <template slot="value" slot-scope="data"> <!--  可用余额 -->
        <!-- <span>{{(data.item.value)._toFixed(8)}}</span> -->
        <span>{{data.item.value || 0}}</span>
      </template>

      <template slot="lockValue" slot-scope="data"> <!--  冻结额 -->
        <span>{{data.item.lockValue || 0}}</span>
      </template>

      <template slot="action" slot-scope="data">
        <div class="action-slot">
          <span :class="{action:ifOperateStatus(data.item.operateStatus).in}" @click="tanchuan(1,data.item.coinType,data.item.operateStatus)">{{$t('u_cb')}}</span>&nbsp;&nbsp;
          <span :class="{action:ifOperateStatus(data.item.operateStatus).out}" @click="tanchuan(2,data.item.coinType,data.item.operateStatus)">{{$t('u_tb')}}</span>&nbsp;&nbsp;
          <span :class="{action:ifOperateStatus(data.item.operateStatus).out}" @click="tanchuan(3,data.item.coinType,data.item.operateStatus)">内部转币</span>
        </div>
      </template>
    </b-table>
    <div class="chong_bi" v-if="dianji==1" ><!-- 充币 -->
      <coin-in-d-n  v-on:child-say="tanchuanchuanzhi" :message="chuan_di_zhi"></coin-in-d-n>
    </div>
    <div class="ti_bi"  v-if="dianji==2"><!-- 提币 -->
      <coin-out-d-n v-on:child-say="tanchuanchuanzhi" :message="chuan_di_zhi"></coin-out-d-n>
    </div>
    <div class="ti_bi"  v-if="dianji==3"><!-- 转币 -->
      <coin-out-d-n-z v-on:child-say="tanchuanchuanzhi" :message="chuan_di_zhi"></coin-out-d-n-z>
    </div>
    <!-- the modal -->

  </div>
</template>

<script>

import mixins from '../../assets/js/mixin';
import { isPhoneNum, userNameTransform, mathService, pop } from "../../assets/js/common";
import { BigNumber } from 'bignumber.js';

import QRCode from "qrcodejs2";
import ClipboardJS from '../../../static/clipboard.min';
import coinoutdn from './coin_out_d.vue';
import coinoutdnz from './coin_out_d_z.vue';
import coinindn from './coin_in_d.vue';
import { mapActions, mapState } from "vuex";
export default {

 components:{
     'coin-out-d-n':coinoutdn,
     'coin-out-d-n-z':coinoutdnz,
     'coin-in-d-n':coinindn
     },
  mixins: [mixins],
  data() {
    return {
      dianji:0,
      msg: "资产列表",
      fields: [
        { key: 'coinType', label: this.$t('u_bz') },
        { key: 'value', label: this.$t('u_ye') },
        { key: 'lockValue', label: this.$t('u_djje') },
        { key: 'action', label: this.$t('u_cz') },

      ],
      items: [],
      btc:'',//btc 当前价
      chuan_di_zhi:"USDT",//需要传递给cion_in_d页面的值
      cnySum:0,//用户资产折合
      btcSum:0,
    }
  },
  methods: {
    goto(id) {
           this.dianji =  this.$route.query.code;
           this.chuan_di_zhi =  this.$route.query.bizhong;
        },

    tanchuan(e,coinType,val){//四个参数 e.代表能不能冲提币（0-3）coinType：给打开的页面传递打开哪一个币种的冲提币 val能不能冲提币 type
      if(e == 1 ){
        if(this.ifOperateStatus(val).in){
            this.chuan_di_zhi = coinType;
            this.dianji = e;
            document.body.style.overflow='hidden';
            document.body.style.height='100%';
            document.documentElement.style.overflow='hidden';
        }else{
          return
        }
      }else if(e == 2){
        if(this.ifOperateStatus(val).out){
           this.chuan_di_zhi = coinType;
            this.dianji = e;
            document.body.style.overflow='hidden';
            document.body.style.height='100%';
            document.documentElement.style.overflow='hidden';
        }else{
          return
        }
      }else if(e == 3){
        if(this.ifOperateStatus(val).out){
          this.chuan_di_zhi = coinType;
          this.dianji = e;
          document.body.style.overflow='hidden';
          document.body.style.height='100%';
          document.documentElement.style.overflow='hidden';
        }else{
          return
        }
      }


    },
    tanchuanchuanzhi(){

      this.dianji = 0;
      document.body.style.overflow='visible';
      document.body.style.height='';
      document.documentElement.style.overflow='visible'
    },

    getUserCoinList() {
      let _self = this;
      _self.ifLoadingChange(true)
      _self.$http.get('/nb-web/api/coin/user/list').then(res => {
        if (res.data.code === '001') {
          let data = res.data.result.list;
          if(data != null){
          }
          _self.items = data;
        }
      })
    },
    ifIsTrade(val) {
      // 0 不可交易  1可交易
      switch (val) {
        case 0:
          return false;
          break;
        case 1:
          return true;
          break;
        default:
          break;
      }
    },
    ifOperateStatus(val) {
      switch (val) {
        case 0:
          return { in: false, out: false };
          break;
        case 1:
          return { in: true, out: true };
          break;
        case 2:
          return { in: true, out: false };
          break;
        case 3:
          return { in: false, out: true };
          break;
        default:
          return { in: false, out: false };
          break;
      }
    },
    ...mapActions(['accountTabActiveChange', 'ifLoadingChange'])
  },
  computed: {
    ...mapState(['isBindPhone'])
  },
  created() {
    this.accountTabActiveChange(0);
    this.getUserCoinList();
    this.goto();

  },
  mounted(){

  }
}
</script>

<style lang="scss" scoped>
.nav_bg {
    background: #0f214a !important;
}
.chong_bi{
  position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: rgba(9,21,48,0.40);
    overflow-y: scroll;
    .user_coinin_chosen{
      margin:150px auto;
      width: 588px;
      height: 894px;
      background: #FFFFFF;
      border-radius: 6px;
    }

    .in-table {
    width: 100%;
    overflow: auto;
  }
  .in-table table {
    width: 100%;
    min-width: 850px;
    // border-top: 1px #eee solid;
  }
  .in-table table tr{
    border-bottom: 1px solid rgba(153,167,200,0.2);
  }
  .in-table tr:nth-child(1) th{
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #99A7C8;
    letter-spacing: 0;
  }
   .in-table tr th:nth-child(6){
     padding-right:0;
     text-align: right;
   }
  .in-table tr th,
  .in-table tr td {
    padding: 10px;
    // border-bottom: 1px #eee solid;
    font-weight: normal;
    font-size: 14px;
  }
  .in-table tr th,
  .in-table tr td {
    // border-bottom: 1px #eee solid;
  }
  .in-table tr td div {
    line-height: 20px;
  }
  .coinin_chosen {
    padding: 25px 10px;
    display: flex;
    span {
      width: 80px;
      line-height: 24px;
    }
    ul {
      flex: 1;
    }
    li {
      font-size: 14px;
      line-height: 24px;
      color: #333333;
      float: left;
    }
    .chosen-item {
      margin: 0 10px;
      padding: 0 10px;
      cursor: pointer;
      list-style: none;
      &:hover,
      &.active {
        color: #fff;
        background: #2d6df0;
        border-radius: 2px;
      }
    }
  }
  .qrcode {
    img {
      display: block;
      margin: 0 auto;
      width: 160px;
      height: 160px;
    }
  }
  .pay-address {
    p {
      margin-top: 23px;
      line-height: 24px;
      margin-bottom: 30px;
      font-size: 14px;
      color: #333;
      width: 100%;
      text-align: center;
    }
    .pay-address-btn {
      width: 161px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      background: #2d6df0;
      color: #fff;
      font-size: 16px;
      border-radius: 20px;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  .chosen-line {
    width: 100%;
    height: 30px;
    border-bottom: 1px dashed #d2d2d2;
  }
  .chosen-tips-text {
    padding: 15px 15px;
    p {
      font-size: 12px;
      color: #999;
    }
  }
  .txid-btn {
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px !important;
    border-radius: 4px;
    background-color: #2d6df0;
    color: #ffffff;
    cursor: pointer;
  }

}
.ti_bi{
  position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: rgba(9,21,48,0.40);
    overflow-y: scroll;
    .user_coinin_chosen{
      margin:30px;

      background: #FFFFFF;
      border-radius: 6px;
    }
}
.hkt-text {
  font-size: 16px;
  color: #333;
  line-height: 24px;
}
.pay-msg {
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}





.account-msg{
  // width: 1020px;
  // height: 604px;
}
.invite-btn {
  width: 120px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  color: #ffefef;
  background-image: linear-gradient(0deg, #2d6df0, #27e7dd),
    linear-gradient(#37dfdd, #37dfdd);
  margin: 10px;
}
#invite-url {
  opacity: 0;
}

.qrcode-out {
  width: 100%;
  height: 150px;
  img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;
  }
}
.qrcode-text {
  text-align: center;
  font-size: 14px;
  display: block;
  margin: 20px auto;
}

 .account-msg {
 /deep/ table {
    thead {
      tr th {
        font-weight: normal;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #546EAA!important;
        letter-spacing: 0;

        &:nth-child(1) {
          width: 180px;
        }
        &:nth-child(2) {
          min-width: 70px;

        }
        &:nth-child(3) {
          min-width: 100px;

        }
        &:nth-child(4) {
          min-width: 100px;

        }
        &:nth-child(5) {
          min-width: 100px;
      text-align: right
        }

      }
    }
    tbody {
      tr td{
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #546EAA;
        letter-spacing: 0;

      }
      tr td:nth-child(1) {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #1F3F87;
        letter-spacing: 0;
        text-align: left
      }
       tr td:nth-child(5) {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #3981F2;
        letter-spacing: 0;
      text-align: right;
      }
    }
  }
}

.user-card-wrapper {
  // margin-top: 30px;
  .user-card {
    width: 462px;
    height: 144px;
    border-radius: 10px;
    margin-left:40px;
    margin-top:24px;
    > div {
      // height: 86px;
      // padding: 13px 0 13px 10px;
      margin-bottom: 8px;
      position: relative;
    }
    .qr-logo {
      width: 60px;
      height: 60px;
      background: #fff;
      border-radius: 50%;
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 35px;
        height: 35px;
      }
    }
    img {
      width: 60px;
      height: 60px;
      float: left;
    }

    .user-card-text {
      float: left;
      margin-left: 25px;
      margin-top:11px;
      p:nth-child(1) {
        line-height: 32px;
        color: #333;
        font-size: 16px;
      }
      p:nth-child(2) {
        line-height: 29px;
        color: #999;
        font-size: 12px;
      }
    }
    .user-card-state {
      position: absolute;
      top: 19px;
      left: 107px;
      padding-right: 20px;
      .goto-link {
        cursor: pointer;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #D75F5F;
        letter-spacing: 0;
        line-height: 14px;
      }
      p {



      }
    }
  }
  .user-card:nth-child(2), .user-card:nth-child(4){
    margin-left:-50px;

  }

  .user-card-phone {
    background-color: #E6EEFF;
    width: 462px;
    height: 144px;
    border-radius: 8px;
     background: url("/src/assets/img/bbs/user/zhi_fu_mi_ma.png")
  }
  .user-card-iden {
    background-color: #E6EEFF;
    width: 462px;
    height: 144px;
    border-radius: 8px;
    background: url("/src/assets/img/bbs/user/shi_ming_ren_zheng.png")
  }
  .user-card-login {
    background-color: #E6EEFF;
    width: 462px;
    height: 144px;
    border-radius: 8px;
     background: url("/src/assets/img/bbs/user/jian_yi_mi_ma.png")
  }
  .user-card-pay {

    width: 462px;
    height: 144px;
    background: #E6EEFF;
    border-radius: 8px;
     background: url("/src/assets/img/bbs/user/shi_ming_ren_zheng.png")
  }
}

//账户资产表格
.user-amounts {
  padding-top: 20px;
  padding-left: 10px;
  span {
    line-height: 53px;
    &:nth-child(1) {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    letter-spacing: 0;;
    }
    &:nth-child(2) {
      font-size: 30px;
      // color: #1ec167;
    }
    &:nth-child(3) {
      font-size: 16px;
      color: #666;
    }
  }
}

.action-slot {
  min-width: 150px;
  span {
    font-size: 14px;
    color: #999;
    cursor: no-drop;
    &.action {
      cursor: pointer;

      font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #3981F2;
        letter-spacing: 0;
    }
  }
}

.btn{
  position: absolute;
    left: 24px;
    top: 94px;
  width: 100px;
  height: 30px;
  line-height: 15px;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  background-image: linear-gradient(-90deg, #6CA5FF 1%, #5291FF 99%);
  border-radius: 4px;
  color: #FFFFFF;
  letter-spacing: 0;
  cursor: pointer;

}
.qu{
    margin-left: 705px;
    margin-top: 30px;
    width: 276px;
    height: 50px;
    background-image: linear-gradient(-90deg, #6CA5FF 1%, #5291FF 99%);
    border-radius: 10px;
    text-align: center;
    line-height: 45px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    cursor: pointer;
}
.jian_ce{
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #6CB875;
  letter-spacing: 0;
  line-height: 14px;
}


#__BVID__21_{
    width:960px;
    margin:0 30px!important;
}
#__BVID__21_ thead tr th{
    border-top:none;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #99A7C8;
    letter-spacing: 0;
    text-align: center;
}
#__BVID__21_ thead tr th:nth-child(1){
text-align: left;
}
#__BVID__21_ thead tr th:nth-child(5){
text-align: right;
}
#__BVID__21_ tbody tr td:nth-child(1){
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #1F3F87;
    letter-spacing: 0;
}
#__BVID__21_ tbody tr td:nth-child(2),#__BVID__21_ tbody tr td:nth-child(3),#__BVID__21_ tbody tr td:nth-child(4){

    font-family: PingFangSC-Medium;
font-size: 14px;
color: #546EAA;
letter-spacing: 0;
text-align: center;
}
#__BVID__21_ thead tr th:nth-child(5){
    margin-left:10px;
}
#__BVID__21_ tbody tr td:nth-child(5){
    text-align: right;
}
</style>


